<template>
  <div class="doctor-detail">
    <div v-if="detailData.portrait">
      <img :src="detailData.portrait" alt="" class="photo" />
    </div>
    <div class="line"></div>
    <div class="title">
      <img
        src="https://www.aierchina.com/static_2017aierchina/images/logo_blue_expert.png"
        alt=""
      />
      <div class="main">
        <p class="name">{{ detailData.name }}</p>
        <p class="host">{{ detailData.host }}</p>
        <p class="position">{{ detailData.position }}</p>
      </div>
    </div>
    <ul v-if="detailData.child">
      <li v-for="(item, index) of detailData.child" :key="index">{{ item }}</li>
    </ul>
    <div class="detail-button">
      <router-link to="/customer">
        <img class="icon" src="../icon/zixun.png" alt="" /><span>咨询</span>
      </router-link>
      <router-link to="/aierapp/clinicReg">
        <img class="icon" src="../icon/yuyue.png" alt="" /><span>预约</span>
      </router-link>
    </div>
  </div>
</template>
<script>
export default {
  // props: ["id"],
  data() {
    return {
      detailData: {},
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        const { id, item } = to.params;
        if (id) {
          this.detailData = item;
          //child 里面即为详情描述信息
          this.detailData.child = this.detailData.construction
            ? this.detailData.construction.split("@")
            : [];
          this.detailData.child.splice(
            0,
            this.detailData.host,
            ...this.detailData.description.split("、")
          );
        } else {
          this.detailData = {};
        }
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.changeColor();
    });
  },
  beforeDestroy() {
    clearInterval(this.time);
  },
  methods: {
    changeColor() {
      const elem = document.querySelector(".detail-button");
      let elemChild = elem.childNodes;
      this.time = setInterval(() => {
        Array.from(elemChild).forEach((item) => {
          item.style.borderColor = this.getRGB();
        });
      }, 1000);
    },
    getRGB() {
      //rgb颜色随机
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
  },
};
</script>
<style lang="scss" scoped>
.doctor-detail {
  padding: 10px;
  border: 1px dashed #bfbfbf;
  .photo {
    width: 100%;
  }
  .line {
    height: 5px;
    background: #377bee;
  }
  .title {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    > img {
      height: 100%;
    }
  }
  .main {
    > P {
      text-align: right;
      margin: 3px;
    }
    .name {
      font-size: 30px;
      font-weight: bolder;
      color: #377bee;
    }
  }
  ul {
    padding-left: 15px;
    > li {
      list-style: disc;
      color: #838383;
      font-size: 14px;
      line-height: 26px;
    }
  }
  .detail-button {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    > a {
      width: 112px;
      height: 40px;
      // background: #377bee;
      // padding: 5px 0;
      color: #838383;
      border: 1px solid #838383;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      .icon {
        width: 20px;
        height: 20px;
        overflow: hidden;
      }
      span {
        font-size: 16px;
        margin: 0 0 3px 5px;
      }
    }
  }
}
</style>
